import style from "./index.module.scss"
export type CardData = {
    dataIndex: string
    title: string
    desc: string
    tags: string[]
}
type Props = {
    cardData: CardData
    className?: string
    onMouseMove: () => void
    onMouseOut: () => void
}

export default function Card(props: Props) {
    console.log("zoul");

    const { cardData, className, onMouseMove, onMouseOut } = props
    return (
        <div className={`${style.card} flex flex-col w-[25%]  border-1 border-[#7d7e93] pt-6 h-[540px] rounded-3xl${className ? " " + className : ""}`} onMouseMove={onMouseMove} onMouseOut={onMouseOut}>
            <div className='logo flex justify-center'>
                <img src={`/src/assets/smart-city/inter-big-data/${cardData.dataIndex}-logo.png`} className="w-12 h-12" alt="" />
            </div>
            <div className="title text-[26px] text-[#231915] font-bold tracking-wider flex justify-center py-7 items-center my-5 bg-[#8c8ea3]">{cardData.title}</div>
            <div className="desc mb-16 text-[#f8f8f8] text-[14px] px-7 h-40">{cardData.desc}</div>
            <div className="tags flex flex-wrap justify-between px-7">
                {
                    cardData.tags.map((tag, index) => (
                        <div key={tag} className={`text-[16px] flex justify-center mb-2.5 items-center py-1 text-[#ffbe6e] border-1 border-[#ff6933] w-[calc(100%/3-8px)]${[3, 4, 5].includes(index) ? " !mb-0" : ""}`}>{tag}</div>
                    ))
                }
            </div>
        </div>
    )
}
